﻿<!DOCTYPE html>
<html>
<head>
    <style>
        div.out {
            width: 40%;
            height: 120px;
            margin: 0 15px;
            background-color: #D6EDFC;
            float: left;
        }

        div.in {
            width: 60%;
            height: 60%;
            background-color: #FFCC00;
            margin: 10px auto;
        }

        p {
            line-height: 1em;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="../../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

    <div class="out overout"><p>move your mouse</p><div class="in overout"><p>move your mouse</p><p>0</p></div><p>0</p></div>

    <div class="out enterleave"><p>move your mouse</p><div class="in enterleave"><p>move your mouse</p><p>0</p></div><p>0</p></div>


    <script>
        var i = 0;
        $("div.overout").mouseover(function () {
            $("p:first", this).text("mouse over");
            $("p:last", this).text(++i);
        }).mouseout(function () {
            $("p:first", this).text("mouse out");
        });

        var n = 0;
        $("div.enterleave").mouseenter(function () {
            $("p:first", this).text("mouse enter");
            $("p:last", this).text(++n);
        }).mouseleave(function () {
            $("p:first", this).text("mouse leave");
        });

    </script>

</body>
</html>